<template>
  <ContentWrap>
    <div class="flex justify-end">
      <el-form :model="queryForm" inline label-width="auto">
        <el-button-group>
          <el-button
            v-for="button in dateTypes"
            :key="button.text"
            :type="queryForm.type === button.type ? 'primary' : ''"
            text
            @click="queryForm.type = button.type"
          >
            {{ button.text }}
          </el-button>
        </el-button-group>
        
        <el-date-picker
          v-model="queryForm.date"
          :type="queryForm.type"
          placeholder="请选择"
          @change="handleQuery"
        />
        <el-button
          type="primary"
          plain
          :icon="Refresh"
          circle
          style="margin-left: 10px;"
          @click="handleRefresh"
        />
      </el-form>
    </div>
  </ContentWrap>
  
</template>

<script lang="ts" setup>
import {
  Refresh
} from '@element-plus/icons-vue'

const dateTypes = [
  {
    text: '按日',
    type: 'date',
  },
  {
    text: '按周',
    type: 'week',
  },
  {
    text: '按月',
    type: 'month',
  },
  {
    text: '按年',
    type: 'year',
  },
]
const queryForm = reactive<any>({
  date: '',
  type: 'date',
})
const emit = defineEmits(['change'])
const handleRefresh = () => {
  queryForm.date = ''
  emit('change', queryForm.date, queryForm)
}
const handleQuery = () => {
  emit('change', queryForm.date, queryForm)
}
onMounted(() => {
  handleRefresh()
})
</script>

<style lang="scss" scoped>
</style>
